<template>
 <rx-layout class="billBox">
   <div slot="left" width="260">
     <div class="itemContainer"  @click="selectModular('model')">
       <header>{{i18n('tltle.model','业务模型')}}</header>
       <ul>
         <li>
           <em class="itemIcon">
             <a-icon type="menu-fold" />
           </em>
           <div class="itemContent">
             <h5>{{i18n('tltle.entity','业务实体')}}</h5>
             <p>文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述</p>
           </div>
         </li>
         <li>
           <em class="itemIcon">
             <a-icon type="menu-fold" />
           </em>
           <div class="itemContent">
             <h5>{{i18n('tltle.object','业务对象')}}</h5>
             <p>文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述</p>
           </div>
         </li>
       </ul>
     </div>
     <div class="itemContainer"  @click="selectModular('form')">
       <header>{{i18n('tltle.documentOnline','在线单据')}}</header>
       <ul>
         <li>
           <em class="itemIcon">
             <a-icon type="menu-fold" />
           </em>
           <div class="itemContent">
             <h5>{{i18n('tltle.creation','在线建单')}}</h5>
             <p>文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述</p>
           </div>
         </li>
         <li>
           <em class="itemIcon">
             <a-icon type="menu-fold" />
           </em>
           <div class="itemContent">
             <h5>{{i18n('tltle.modelGenerate','基于模型生成单据')}}</h5>
             <p>文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述</p>
           </div>
         </li>
       </ul>
     </div>
     <div class="itemContainer"  @click="selectModular('modeling')">
       <header>{{i18n('tltle.modeling','单据建模')}}</header>
       <ul>
         <li>
           <em class="itemIcon">
             <a-icon type="menu-fold" />
           </em>
           <div class="itemContent">
             <h5>{{i18n('tltle.managementModel','业务模型管理')}}</h5>
             <p>文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述</p>
           </div>
         </li>
         <li>
           <em class="itemIcon">
             <a-icon type="menu-fold" />
           </em>
           <div class="itemContent">
             <h5>{{i18n('tltle.managementEntity','业务实体管理')}}</h5>
             <p>文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述</p>
           </div>
         </li>
       </ul>
     </div>
   </div>
   <div slot="center">
    <component :is="modular"></component>
   </div>
 </rx-layout>
</template>

<script>
  import { RxLayout } from "@lowcode/jpaas-common-lib"
  import businessModel from "./businessModel"
  import documentModeling from "./documentModeling"
  import formDesign from "./formDesign"
    export default {
        name: 'bill',
        components: {
          RxLayout,
          formDesign,
          businessModel,
          documentModeling
        },
        data() {
            return {
              modular:''
            }
        },
        computed: {},
        created() {
          this.modular = formDesign ;//默认加载 在线单据 页面；
        },
        mounted() {
        },
        methods: {
            i18n(name, text, key) {
                return this.$ti18(name, text, "functionNav", key);
            },
          selectModular(key){
            if(key == 'model'){
              this.modular = businessModel ;
            }
            if(key == 'form'){
              this.modular = formDesign ;
            }
            if(key == 'modeling'){
              this.modular =  documentModeling ;
            }
          }
        }
    }
</script>

<style scoped>
  .itemContainer header{
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: block;
  }
  .itemContainer:hover,
  .itemContainer:hover h5
  {
    color: #4D9EFF;
    cursor: pointer;
  }
  .itemContainer  ul > li{
    display: flex;
    padding-bottom: 20px;
    padding-top: 16px;
    border-bottom: 1px solid #ddd;

  }
  .itemContainer  ul > li:last-child{
    border-bottom: 0;
  }


  .itemContainer .itemIcon{
    display: inline-block;
    min-width: 16px;
  }
  .itemContainer .itemContent{
    flex: 1;
    padding-left: 10px;
  }
  .itemContainer .itemContent h5{
    font-size: 14px;
  }
  .itemContent p{
    font-size: 12px;
  }
</style>